<template>
	<view class="box">
		<view v-for="item,index in flowlist" class="item" :class="{actived: index === activeIndex}" @click="handleDetail(item.id, index)">
			<view class="cons flex items-center flex-col">
				<view class="text-24 mb-5">关卡</view>
				<view class="text-34">{{index < 9 ? '0' + (index + 1): index +1}}</view>
				<view class="close flex items-center justify-center" v-if="item.isLearned === 1">
					<uni-icons type="checkmarkempty" class="flex" size="10" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getArticleList_api } from '@/common/apis/course'
import { ref, watch } from 'vue';
const props = defineProps({
	courseId: String,
	examId: String,
	isGop: Boolean
})
const emit = defineEmits(['handle'])
const flowlist = ref([])
const activeIndex = ref()
async function initEvent(){
	console.log('获取列表：', props.courseId)
	flowlist.value = await getArticleList_api({courseId: props.courseId})
}

watch(() => props.courseId, (newVal) => {
	if(newVal){
		initEvent()
	}
}, {immediate: true})

function handleDetail(id, index){
	activeIndex.value = index
	if(!props.isGop){
		uni.$fui.href(`/pages/course/reading/info?rankId=${id}&examId=${props.examId}`)
	} else{
		emit('handle', id)
	}
}
</script>

<style lang="scss" scoped>
.box{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; padding: 20rpx 30rpx;}
.item{background:linear-gradient(180deg, #ECECED 86%, #DFDFE2 100%); border-radius: 12rpx; padding: 15rpx;}
.cons{background-color: #F7F8FA; border-radius: 12rpx; padding: 15rpx 0; position: relative; }
.item:active, .item.actived{background: linear-gradient(180deg, #FEC554 86%, #FEAC0C 100%); .cons{background-color: #FFF5E0;}}
.close{position: absolute; right: -24rpx; top: -24rpx; width: 35rpx; height: 35rpx; background-color: #40d463; border-radius: 100%;}
</style>